<template>
  <div>
    <a-modal v-model:visible="visible" :mask-closable="false" title="用户信息" @cancel="onClose" width="45vw" unmount-on-close>
      <page-form :model="form" ref="formRef" :rules="rules" div="true" class="page-form" layout="vertical">
        <page-form-row>
          <page-form-item field="realname" label="姓名" size="1/2" :rules="{ required: true, message: '请输入姓名' }">
            <i-input v-model="form.realname" />
          </page-form-item>

          <page-form-item label="身份证号" size="1/2">
            <i-input v-model="form.identityCard" />
          </page-form-item>

          <page-form-item label="手机号" field="phone" size="1/2" :rules="{ required: true, message: '请输入手机号' }">
            <i-input v-model="form.phone" />
          </page-form-item>

          <page-form-item label="邮箱" size="1/2">
            <i-input v-model="form.email" />
          </page-form-item>
        </page-form-row>
        <a-divider />
        <page-form-item label="绑定微信" size="1/2">
          <div class="wx_bind" v-if="form.bindThirdParty">
            <span>已绑定</span>
            <a-button size="mini" type="primary" @click="handleBind">解绑</a-button>
          </div>
          <div class="wx_bind off" v-else>
            <span>未绑定</span>
            <a-button size="mini" type="primary" @click="handleBind">绑定</a-button>
          </div>
        </page-form-item>
      </page-form>
      <template #footer>
        <a-space>
          <a-button @click="onClose">关闭</a-button>
          <a-button type="primary" @click="submitFn" :ok-loading="okLoading">确认</a-button>
        </a-space>
      </template>
    </a-modal>
    <WxQrcodeModal ref="wxQrcodeModalRef" @ok="handleBindOk" />
  </div>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { getLoginUserInfo, editLoginUserInfo, wxUnbindUser } from '@/api/user'
  import useUserStore from '@/store/modules/user'
  import WxQrcodeModal from './components/wx-qrcode-modal.vue'

  const form = ref({})
  const visible = ref(false)

  const show = () => {
    visible.value = true
    getUserInfoApi()
  }
  const onClose = () => {
    visible.value = false
    form.value = {}
  }

  const getUserInfoApi = () => {
    getLoginUserInfo({}).then((res) => {
      if (res.code == 200) {
        const data = res.result
        form.value = {
          phone: data.phone,
          realname: data.realname,
          identityCard: data.identityCard,
          email: data.email,
          // bindThirdParty绑定微信 1：已绑定 0：未绑定
          bindThirdParty: data.bindThirdParty,
        }
      }
    })
  }

  const userStore = useUserStore()
  const formRef = ref(null)
  const okLoading = ref(false)
  const submitFn = () => {
    formRef.value.validate((error) => {
      if (!error) {
        const param = {
          ...form.value,
        }
        param.bindThirdParty = undefined
        editLoginUserInfo(param)
          .then(() => {
            Message.success('操作成功')
            userStore.realName = form.value.realname
            onClose()
          })
          .catch(() => {
            okLoading.value = false
          })
      }
    })
  }

  const handleBindOk = () => {
    show()
  }

  // 处理微信绑定
  const wxQrcodeModalRef = ref()
  const handleBind = () => {
    if (form.value.bindThirdParty == 0) {
      wxQrcodeModalRef.value.open()
    } else {
      Modal.confirm({
        title: '提示',
        simple: true,
        cancelText: '关闭',
        okText: '确认',
        content: '解除绑定后，您将无法使用微信快捷登录。确认要解绑吗？',
        onOk: () => {
          wxUnbindUser({}).then((res) => {
            if (res.code == 200) {
              Message.success('解绑成功')
              form.value.bindThirdParty = 0
            }
          })
        },
      })
    }
  }

  // 登录时，微信扫码登录，微信已经绑定其他账号 弹出用户信息框，引导解绑后重新绑定
  onMounted(() => {
    if (userStore.login2Unbind) {
      show()
      userStore.login2Unbind = false
    }
  })

  defineExpose({
    show,
  })
</script>

<style lang="less" scoped>
  .page-form {
    margin: 0;
    :deep(.arco-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    :deep(.arco-modal-body) {
      padding: 10px 80px !important;
    }
    :deep(.arco-col) {
      padding: 0 10px !important;
    }
  }

  .wx_bind {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 32px;
    background: #f2f3f5;
    border-radius: 2px;
    padding: 0 12px;
    font-weight: 400;
    font-size: 14px;
    color: #1d2129;
    line-height: 22px;
    &.off {
      color: #86909c;
    }
  }
</style>
